<template>
  <div>
    <n-form ref="formRef" inline class="w-full">
      <n-form-item label="日期:" label-placement="left">
        <n-date-picker v-model:value="range" type="daterange" class="w-70" @update:value="timeAndAreaChanged" />
      </n-form-item>
      <n-form-item v-if="props.showArea" label="车间:" label-placement="left">
        <n-select
          v-model:value="selectedData.areaName"
          class="w-30"
          clearable
          label-field="areaname"
          value-field="areaname"
          :options="areas"
          @clear="areaClear"
          @update:value="timeAndAreaChanged"
        />
      </n-form-item>
      <n-form-item v-if="props.showModeType" label="型号:" label-placement="left">
        <n-select
          v-model:value="selectedData.modelType"
          class="w-20"
          clearable
          :options="modelTypes"
          @update:value="timeAndAreaChanged"
        />
      </n-form-item>
      <n-form-item v-if="props.showProductSpec" label="料号:" label-placement="left">
        <n-select v-model:value="selectedData.productSpec" class="w-45" clearable filterable :options="productSpecs" />
      </n-form-item>
      <n-form-item v-if="props.showProcessOperation" label="工序:" label-placement="left">
        <n-select v-model:value="selectedData.processOperation" class="w-20" clearable :options="processOperations" />
      </n-form-item>
      <n-form-item v-if="props.showSearchType" label="查询类别:" label-placement="left">
        <n-select v-model:value="selectedData.searchType" class="w-20" :options="searchTypes" />
      </n-form-item>
      <n-form-item label="" label-placement="left">
        <n-button type="primary" @click="search">
          <template #icon><icon-mdi-map-search-outline /></template>
          查询
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import dayjs from 'dayjs';
import { fetchAreaList, fetchModelTypeByTimeAndAreaName, fetchProductSpecByTimeAndAreaName } from '@/service/api';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const props = defineProps({
  showArea: {
    type: Boolean,
    required: false,
    default: true
  },
  showModeType: {
    type: Boolean,
    required: false,
    default: true
  },
  showProductSpec: {
    type: Boolean,
    required: false,
    default: true
  },
  showProcessOperation: {
    type: Boolean,
    required: false,
    default: true
  },
  showSearchType: {
    type: Boolean,
    required: false,
    default: true
  },
  searchFn: {
    type: Function,
    required: true,
    default: null
  }
});
const areas = ref<Factory.Area[]>([]);
const modelTypes = ref<Array<SelectOption>>([]);
const productSpecs = ref<Array<SelectOption>>([]);
const processOperations = ref<Array<SelectOption>>([
  {
    label: '上片',
    value: 'R01'
  },
  {
    label: '镀膜',
    value: 'R03'
  },
  {
    label: '点胶',
    value: 'R04'
  },
  {
    label: '微调',
    value: 'R07'
  },
  {
    label: '封焊',
    value: 'R08'
  },
  {
    label: '测试',
    value: 'R14'
  }
]);
const searchTypes = ref<Array<SelectOption>>([
  {
    label: '月别',
    value: '月别'
  },
  {
    label: '周别',
    value: '周别'
  },
  {
    label: '日别',
    value: '日别'
  }
]);
const selectedData = reactive<Report.Condition>({
  startDate: range.value[0],
  endDate: range.value[1],
  areaName: '',
  modelType: '',
  productSpec: '',
  processOperation: '',
  searchType: '日别'
});

const getAreaList = async () => {
  const result = await fetchAreaList();
  if (result.data) {
    areas.value = result.data;
  }
};

const getModelTypeByTimeAndAreaName = async () => {
  if (props.showModeType) {
    let areaNameString = '';
    if (selectedData.areaName) {
      areaNameString = selectedData.areaName;
    }
    const result = await fetchModelTypeByTimeAndAreaName(
      dayjs(range.value[0]).format('YYYYMMDD'),
      dayjs(range.value[1]).format('YYYYMMDD'),
      areaNameString
    );
    if (result.data) {
      const modelTypeList: Array<SelectOption> = [];
      result.data.forEach(element => {
        const temp: SelectOption = {
          label: element,
          value: element
        };
        modelTypeList.push(temp);
      });
      modelTypes.value = modelTypeList;
    }
  }
};

const getProductSpecByTimeAndAreaName = async () => {
  if (props.showProductSpec) {
    let areaNameString = '';
    if (selectedData.areaName) {
      areaNameString = selectedData.areaName;
    }
    const result = await fetchProductSpecByTimeAndAreaName(
      dayjs(range.value[0]).format('YYYYMMDD'),
      dayjs(range.value[1]).format('YYYYMMDD'),
      areaNameString
    );
    if (result.data) {
      const productSpecList: Array<SelectOption> = [];
      result.data.forEach(element => {
        const temp: SelectOption = {
          label: element,
          value: element
        };
        productSpecList.push(temp);
      });
      productSpecs.value = productSpecList;
    }
  }
};

const timeAndAreaChanged = () => {
  // eslint-disable-next-line prefer-destructuring
  selectedData.startDate = range.value[0];
  // eslint-disable-next-line prefer-destructuring
  selectedData.endDate = range.value[1];
  getModelTypeByTimeAndAreaName();
  getProductSpecByTimeAndAreaName();
};

onMounted(async () => {
  await getAreaList();
  timeAndAreaChanged();
});

const search = () => {
  if (props.searchFn) {
    props.searchFn();
  }
};

const areaClear = () => {
  selectedData.areaName = '';
};

defineExpose({
  selectedData
});
</script>
